<!-- 商品列表页 可切换布局 -->
<template>
	<view class="goodsContent">
		<!-- 列表状态 -->
		<view class="hisGoodsList" v-if="type == 2 && goodsData.length > 0">
			<view @click="toGoods(item.goods_id, item.store_id)" class="hisGoods flex-box" v-for="(item, index) in goodsData" :key="index">
				<view class="p-re">
					<image class="hisImg radius" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
					<view class="masks height p-ab flexac" v-if="item.stock == 0">
						<image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
					</view>
				</view>
				<view class="flex goodsmsg flex-box flex-between">
					<view>
						<view class="thmeTxt hisGoodsName lines2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled selfEnd flex-box align-center" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
					</view>
					<view class="profitTitle_ lines" v-if="item.profitTitle">
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between" style="margin-left: 0" v-if="item.buy_config.state == 1">
						<view>
							<view class="priceNow">
								<text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
						</view>
						<!-- 	<text class="lines">
							{{ item.price_description }}
						</text> -->
						<view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">
								{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 平铺状态 -->
		<view class="flex-box flex-between repeatGoodsList my-box" v-if="type == 1 && goodsData.length > 0">
			<waterfallsFlow ref="waterfallsFlow_" :list="goodsData" @image-click="toDetail" imageSrcKey="img" idKey="goods_id" :offset="12">
				<!-- #ifndef H5  -->
				<view v-for="(item, index) of goodsData" :key="index" slot="slot{{index}}" class="goods-box-msg" @click="toDetail(item)">
					<view class="thmeTxt lines2 hisGoodsName2">
						<text v-if="item.type == 1" class="speTag">特价</text>
						<text v-if="item.type == 2" class="speTag">团购</text>
						{{ item.name }}
					</view>
					<view class="saled" v-if="hot == 1">
						<text>已售{{ item.sales_number }}</text>
						<text>热度{{ item.show_number }}</text>
					</view>
					<view class="profitTitle_ lines" v-if="item.profitTitle">
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between" v-if="item.buy_config.state == 1">
						<view>
							<view class="priceNow">
								<text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
						</view>
						<view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">
								{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
							</text>
						</view>
					</view>

					<view class="maskObtained" v-if="item.state == 0">
						<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</view>
				<!--  #endif -->
				<!-- #ifdef H5 -->
				<template v-slot:default="{ item }">
					<view class="goods-box-msg">
						<view class="thmeTxt lines2 hisGoodsName2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
						<view class="profitTitle_ lines" v-if="item.profitTitle">
							<text>{{ item.profitTitle }}</text>
						</view>
						<view class="prices flex-box flex-between" v-if="item.buy_config.state == 1">
							<view class="priceNow">
								<text class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
							<view class="position flex-box align-center" v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
								<text class="iconfont icon-dingwei"></text>
								<text class="txt">
									{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
								</text>
							</view>
						</view>
					</view>
					<view class="maskObtained" v-if="item.state == 0">
						<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</template>
				<!-- #endif -->
			</waterfallsFlow>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import waterfallsFlow from './waterfall/waterfall.vue';
export default {
	components: { waterfallsFlow },
	/**
	 * type: 1瀑布流  2列表
	 * hot:是否显示热度 0不显示 1显示
	 *
	 * **/
	props: ['goodsData', 'type', 'hot', 'positionshow'],
	data() {
		return {
			imgUrl: this.imgUrl,
			staticUrl: this.staticUrl
		};
	},
	methods: {
		toDetail(goods) {
			this.toGoods(goods.goods_id, goods.store_id);
		}
	},
	computed: {
		...mapState(['startUp', 'color'])
	}
};
</script>

<style scoped lang="scss">
/* 商品列表 */
.hisGoodsList {
	padding: 30rpx 24rpx;
	.hisImg {
		width: 200rpx;
		height: 200rpx;
		margin: 0 24rpx 0 0;
		border-radius: 8rpx;
	}
	.masks {
		width: 200rpx;
		background: rgba(0, 0, 0, 0.4);
		top: 0;
		left: 0;
		.sold {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.speTag {
		margin-right: 4rpx;
	}
	.color333 {
		color: #333333;
		padding: 0;
		font-size: 26rpx;
		.bg {
			display: none;
		}
	}
	.prices {
		margin: 10rpx 8rpx 0 16rpx;
		.priceNow {
			margin-right: 10rpx;
			.price {
				font-size: 32rpx;
				color: $uni-color-price;
			}
		}
		.priceReg {
			color: #999;
			text-decoration: line-through;
			.price {
				color: #999;
				text-decoration: line-through;
			}
		}
		.position {
			text {
				font-size: 26rpx;
				color: #666666;
				margin-left: 6rpx;
			}
		}
	}
	.hisGoods {
		margin-bottom: 26rpx;
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 26rpx;
		position: relative;
		&:nth-last-of-type(1) {
			border-bottom: none;
		}
		.goodsmsg {
			flex-direction: column;
			.selfEnd {
				margin-top: 20rpx;
			}
			.hisGoodsName {
				margin-bottom: 10rpx;
				line-height: 36rpx;
				font-size: 28rpx;
			}
			.saled {
				text {
					color: #888888;
					font-size: 24rpx;
					padding-right: 20rpx;
					border-right: 1px solid #dddddd;
					margin-right: 20rpx;
					line-height: 20rpx;
					&:nth-last-of-type(1) {
						border: none;
					}
				}
			}
		}
	}
}
</style>
